<template>
  <div class="order-table">
    <ul class="thead">
      <li
        v-for="(item, index) in columns"
        :key="index"
        class="thead-td"
        :style="item.width ? { minWidth: item.width + 'px' } : ''"
      >
        <span>{{ item.title }}</span>
      </li>
    </ul>
    <ul v-for="(data, dataIndex) in tableData" :key="dataIndex" class="tbody">
      <div v-if="rowTop?.length > 0" class="tbody-top">
        <div v-for="(rowItem, rowIndex) in rowTop" :key="rowIndex" class="li-item">
          <span class="item-label">{{ rowItem.title }}</span>
          <slot :name="rowItem.key" :data="data[rowItem.key]">
            <span class="item-data">: {{ data[rowItem.key] }}</span>
          </slot>
        </div>
      </div>
      <div class="tbody-body">
        <li
          v-for="(item, index) in columns"
          :key="index"
          class="tbody-td"
          :style="item.width ? { minWidth: item.width + 'px' } : ''"
        >
          <slot :name="item.key" :data="data">
            <span>{{ data[item.key] }}</span>
          </slot>
        </li>
      </div>
    </ul>
    <div v-if="!tableData.length" class="table-nodata">
      <img class="nodata-img" src="../../assets/icons/table-nodata.svg" alt="" />
      <span class="nodata-text">暂无数据</span>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    columns: {
      type: Array,
      required: true,
    },
    rowTop: {
      type: Array,
      required: false,
      default: () => [],
    },
    tableData: {
      type: Array,
      required: false,
      default: () => [],
    },
  },
  setup() {
    return {}
  },
})
</script>

<style lang="scss" scoped>
.order-table {
  margin-top: 10px;

  .thead {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    font-size: 12px;

    .thead-td {
      width: 100%;
      background: rgba(243, 243, 243, 1);
      color: #505050;
      text-align: center;
      height: 36px;
      line-height: 36px;

      &:nth-child(1) {
        text-align: left;

        span {
          margin-left: 10px;
        }
      }
    }
  }

  .tbody {
    font-size: 12px;
    display: flex;
    flex-direction: column;

    .tbody-top {
      border: 1px solid rgba(229, 229, 229, 1);
      background: rgba(241, 241, 241, 1);
      padding: 8px;
      display: flex;
      flex-wrap: wrap;

      .li-item {
        min-width: 220px;
        margin-left: 10px;
        .item-data {
          margin-right: 10px;
          color: gray;
        }
        &:nth-child(2) {
          width: calc(100% - 250px);
          margin-left: 0;
        }
      }
    }

    .tbody-body {
      text-align: center;
      display: flex;

      &:hover {
        background: #e9f6fe;
        cursor: pointer;
      }

      .tbody-td {
        flex: 1;
        border: 1px solid rgba(229, 229, 229, 1);
        margin-top: -1px;
        overflow: scroll;
        padding: 10px;
        min-height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;

        &:nth-child(n + 2) {
          margin-left: -1px;
        }
      }
    }
  }
  .table-nodata {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    border: 1px solid #f0f0f0;

    .nodata-img {
      height: 40px;
    }

    .nodata-text {
      color: rgba(0, 0, 0, 0.25);
    }
  }
}
</style>
